<template>
    <div>
        <a-modal
            v-model:visible="visible"
            :title="modalTitle"
            @cancel="visible = false"
            width="70%"
            :dialogStyle="{top:'20px'}"
            wrapClassName="impactAssessment-full-modal"
            >
            <div style="margin-top: 20px;">
                <table class="impactAssessment-transportation-table" border="1" borderColor="#d9d9d9" cellspacing="0" style="width: calc(100%);border-color: #d9d9d9 !important;">
                    <tr style="background: #dee5ed !important;">
                        <th>学习人员</th>
                        <th>学习状态</th>
                        <th>学习意见</th>
                        <th>时间</th>
                    </tr>
                    <tr v-if="impactAssessmentList.length" v-for="(item,index) in impactAssessmentList" :key="index" :style="{background:index % 2 !== 0?'#f0f0f1 !important':''}">
                        <td>{{ item.fdbr }}</td>
                        <td>{{ item.fblzt }}</td>
                        <td>{{ item.fblyj }}</td>
                        <td>{{ item.fblsj }}</td>
                    </tr>
                    <tr v-if="impactAssessmentList.length == 0">
                        <td colspan="7">暂无数据</td>
                    </tr>
                </table>
                <a-form :form="form" ref="form" class="impactAssessment-model-form-box" :key="formKey">
                    <a-descriptions bordered style="width: 100%;">
                        <a-descriptions-item :span="3">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" v-if="modalTitle == '宣贯效果评价'">*</span>
                                宣贯效果评价
                            </span>
                            <a-form-item ref="fxgxgpj" prop="fxgxgpj">
                                <div style="width: 100%;">
                                    <a-textarea
                                        v-if="modalTitle == '宣贯效果评价'"
                                        style="width: 100%"
                                        v-model="formState.fxgxgpj"
                                        :autosize="{ minRows: 2, maxRows: 10000 }"
                                        v-decorator="[
                                            'fxgxgpj', { initialValue:formState.fxgxgpj, rules: rules.fxgxgpj}
                                        ]"/>
                                    <span v-else>{{ formState.fxgxgpj }}</span>
                                </div>
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item :span="3">
                            <span slot="label" class="descriptions-label-slot">
                                {{ modalTitle == '宣贯效果评价'?'上传附件':'附  件'}}
                            </span>
                            <a-upload :showUploadList="false" :beforeUpload="beforeUpload" action="" @change="uploadFile">
                                <a-button
                                    v-if="modalTitle == '宣贯效果评价'" class="blue-btn" type="default" icon="upload" >上传
                                </a-button>
                            </a-upload>
                            <a-list item-layout="horizontal" :data-source="filesList">
                                <a-list-item slot="renderItem" slot-scope="item, index">
                                    <a-list-item-meta>
                                        <a @click="openFiles(item)" slot="title" href="#">{{ item.fwjccmc }}</a>
                                    </a-list-item-meta>
                                    <a-button style="margin-right: 10px;" class="blue-btn" type="primary" @click="openFiles(item)" icon="eye">预览</a-button>
                                    <a-button style="margin-right: 10px;" class="blue-btn" type="primary" @click="downloadFiles(item)" icon="download">下载文件</a-button>
                                    <a-button
                                        v-if="modalTitle == '宣贯效果评价'"
                                        class="red-btn"
                                        type="primary"
                                        style="margin-right: 10px;"
                                        @click="deleteFiles(item.id)" icon="delete">
                                        删除文件
                                    </a-button>
                                </a-list-item>
                            </a-list>
                        </a-descriptions-item>
                        <a-descriptions-item :span="3" v-if="modalTitle !== '宣贯效果评价'">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" >*</span>
                                实施日期
                            </span>
                            <a-form-item ref="fssrq" prop="fssrq">
                                <div style="width: 100%;">
                                    <a-form-item class="flex-1-input-box">
                                        <a-date-picker
                                        v-if="!formState.disabled"
                                        style="width:200px"
                                        placeholder="请输入实施日期"
                                        v-model:value="formState.fssrq"
                                        />
                                        <span v-else>{{ formState.fssrq }}</span>
                                    </a-form-item>
                                </div>
                            </a-form-item>
                        </a-descriptions-item>
                    </a-descriptions>
                </a-form>
            </div>
            <template slot="footer">
                <a-button @click="handlePreserve" icon="save">保存</a-button>
                <a-button :loading="confirmLoading" class="blue-btn" type="primary" @click="shandleSubmit(false)" icon="check-circle">提交并关闭</a-button>
            </template>
        </a-modal>
    </div>
</template>
<script>
import {
    queryXgxxryList,
    saveZltxwjFlow,
    submitZltxwjFlow,
    uploadXgxxFile,
    queryXgxxFile,
    deleteXgxxFile,
    downloadXgxxFile,
    openCommonZdwj,
} from './service/index'
import blobType from '@/common/blobType'
import moment, { now } from 'moment'
export default {
    data() {
        return {
            visible: false,
            moment:moment,
            impactAssessmentList: [],
            form: this.$form.createForm(this, { name: 'zltxwjFlowWith' }),
            formState: {},
            modalTitle: '',
            formKey: '',
            confirmLoading: false,
            filesList: [],
            rules:{
                fxgxgpj: [{
                    required: true,
                    message: '请输入宣贯效果评价',
                    trigger: 'blur',
                }],
            },
        }
    },
    methods: {
        getData(val){
            this.formState = {}
            this.formState.fxgxgpj = ''
            this.impactAssessmentList = []

            this.formState = {...val}
            this.modalTitle = this.formState.fhjmc
            //console.log('pppppppp---ppppppp',this.formState)
            queryXgxxryList({zltxwjid: this.formState.id}).then(res => {
                if(res.success){
                    this.impactAssessmentList = res.result
                }
            })
            this.getfilesList()
        },
        beforeUpload(e){
            return false
        },
        uploadFile({file}){
            if(typeof file.uid !== 'undefined') {
                const fileData = new FormData();
                fileData.append("file", file);
                fileData.append("zltxwjid", this.formState.zltxwjid);
                uploadXgxxFile(fileData).then(res => {
                    if (res.code == 200){
                        this.$message.success('上传成功')
                        this.getfilesList()
                    }else {
                        this.$message.warning(res.message)
                    }
                }).catch(error =>{
                    this.$message.warning('上传失败')
                })
            }
        },
        getfilesList(){
            queryXgxxFile({zltxwjid: this.formState.id}).then(res => {
                this.filesList = []
                this.filesList = res.result
            })
        },
        // 预览
        openFiles(item){
            //console.log('文件预览---',item)
          if(item.fwjlx.indexOf('pdf') !== -1){
                //console.log('PDF')
                //console.log(bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/flow-zltxwj/downloadXgxxFile?id='+item.id)
                window.open(
                    bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/flow-zltxwj/downloadXgxxFile?id='+item.id
                )
            } else {
                //console.log('其他')
                openCommonZdwj({id:item.id}).then(res => {
                    if(!res.success){
                        this.$message.warning('当前附件类型不支持预览,请下载查看')
                    } else {
                        window.open(res.result.wordUrl, '_blank')
                    }
                })
            }
        },
        // 下载附件
        downloadFiles(val){
            //console.log('下载',val)
            var that = this
            var fileName = val.fwjccmc
            downloadXgxxFile({id:val.id}).then((data) => {
                // //console.log(data)
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(val.fwjlx)] }))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) //下载完成移除元素
                window.URL.revokeObjectURL(url) //释放掉blob对象
                // this.vxModal.visabled = false;
            })
        },
        // 删除附件
        deleteFiles(idd){
            var that = this
            that.$confirm({
                title: '您确定要删除吗?',
                onOk() {
                    deleteXgxxFile({id:idd}).then(res => {
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.getfilesList()
                        } else {
                            that.$message.warning(res.message)
                        }
                    })
                },
                onCancel() {},
            });
        },
        // 保存
        handlePreserve(val){
            let data = {
                jobid: this.formState.jobid,
                ywid: this.formState.zltxwjid,
                opinion: this.formState.fhjmc == '宣贯效果评价'?this.formState.fxgxgpj:'',
                smgflag: this.formState.smgflag?'是':'否',
                map:{
                    fssrq: this.formState.fssrq ? moment(this.formState.fssrq).format('YYYY-MM-DD') : '',
                    fscrq: this.formState.fscrq ? moment(this.formState.fscrq).format('YYYY-MM-DD') : '',
                    fwjmc: this.formState.fwjmc,
                    ftype: this.formState.ftype,
                    forder: this.formState.forder,
                    fskbb: this.formState.fskbb,
                    fwjbh: this.formState.fwjbh,
                    fsqr: this.formState.fsqr,
                    fsqks: this.formState.fsqks,
                    fxglx: this.formState.fxglx,
                    fxdly: this.formState.fxdly,
                    fqcsm: this.formState.fqcsm,
                    fxgcs: this.formState.fxgcs,
                    fxgxxryid: this.formState.fxgxxryid,
                    fxgxgpj: this.formState.fxgxgpj,
                }
            }
            this.confirmLoading = true
            saveZltxwjFlow(data).then(res=>{
                if(res.code == 200){
                    this.confirmLoading = false
                    this.$emit('successReturn',true)
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                    this.confirmLoading = false
                }
            })
        },
        // 提交
        shandleSubmit(){
            this.form.validateFields((err, values) => {
                if (!err) {
                    var that = this
                    that.confirmLoading = true
                    that.$confirm({
                        title: '您确定要提交吗?',
                        onOk() {
                            let data = {
                                jobid: that.formState.jobid,
                                ywid: that.formState.zltxwjid,
                                // dbrid:values.dbrid.join(','),
                                opinion: that.formState.fhjmc == '宣贯效果评价'?that.formState.fxgxgpj:'',
                                smgflag: that.formState.smgflag?'是':'否',
                                map: {
                                    fssrq: that.formState.fssrq ? moment(that.formState.fssrq).format('YYYY-MM-DD') : '',
                                    fscrq: that.formState.fscrq ? moment(that.formState.fscrq).format('YYYY-MM-DD') : '',
                                    fwjmc: that.formState.fwjmc,
                                    ftype: that.formState.ftype,
                                    forder: that.formState.forder,
                                    fskbb: that.formState.fskbb,
                                    fwjbh: that.formState.fwjbh,
                                    fsqr: that.formState.fsqr,
                                    fsqks: that.formState.fsqks,
                                    fxglx: that.formState.fxglx,
                                    fxdly: that.formState.fxdly,
                                    fqcsm: that.formState.fqcsm,
                                    fxgcs: that.formState.fxgcs,
                                    fxgxxryid: that.formState.fxgxxryid,
                                    fxgxgpj: that.formState.fxgxgpj,
                                }
                            }
                            submitZltxwjFlow(data).then(res=>{
                                if(res.code == 200){
                                    that.$message.success(res.message)
                                    that.confirmLoading = false
                                    that.visible = false
                                    that.$emit('successReturn',false)
                                }else{
                                    that.$message.warning(res.message)
                                    that.confirmLoading = false
                                }
                            })
                        },
                        onCancel() {},
                    });
                }
            })
        },
    },
}
</script>
<style lang="less">
.impactAssessment-full-modal {
    .impactAssessment-transportation-table{
        th{
            text-align: center;
            font-size: 18px;
            padding: 5px;
        }
        td{
            text-align: center;
            padding: 3px 5px;
            height: 40px;
            font-size: 16px;
        }
        .special-table-lable-td{
            background-color: #e6f7ff;
        }
    }
    .impactAssessment-model-form-box {
        margin-top: 20px;
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 88px !important;
            text-align: right;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            .ant-form-item {
              margin-bottom: 0 !important;
            }
        }
        .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 110px !important;//确保左侧固定文字不会换行
            justify-content: center;
        }
        .xhText{
            display: inline-block;
            color: #f5222d;
            line-height: 31px;
            padding-right: 2px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{

        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }
    }
}
</style>
